<template>
    <div class="page">
        <van-row type="flex" justify="space-between" class="banner">
            <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left.png')"/>
            <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
        </van-row>
        <van-cell-group class="main_panel form_panel">
            <h2 class="form_title">欢迎登录</h2>
            <van-field
                    class="input_item"
                    v-model="loginForm.username"
                    clearable
                    left-icon="icon-yonghu"
                    right-icon="question-o"
                    placeholder="请输入用户名"
                    @click-right-icon="$toast('手机号，既购课手机号')"
            >
                <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="yonghu"/>
            </van-field>
            <van-field
                    class="input_item"
                    left-icon="mima"
                    v-model="loginForm.pwd"
                    type="password"
                    placeholder="请输入密码"
            >
                <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="mima"/>
            </van-field>
            <van-field
                    class="input_item"
                    v-model="loginForm.captcha"
                    center
                    clearable
                    left-icon="yanzhengma"
                    placeholder="请输入图形验证码"
            >
                <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="yanzhengma"/>
                <template #button>
                    <img class="captcha" :src="captchaPath" alt="" @click="getCaptchaImg">
                </template>
            </van-field>
            <van-button
                    size="large"
                    @click="handleLogin"
                    class="submit_btn"
                    type="warning"
                    :disabled="loading"
                    :loading="loading"
                    loading-text="提交中..."
            >登录
            </van-button>

            <router-link :to="{name:'forgetPassword'}" class="btn_link">忘记密码</router-link>
        </van-cell-group>
    </div>
</template>

<script>
import configEnv from '_conf'
export default {
  data() {
    return {
      loginForm: {
        username: "",
        pwd: "",
        captcha: ''
      },
      captchaPath:'',
      loading: false,
    };
  },
  mounted() {
   this.getCaptchaImg()
  },
  methods: {
    async handleLogin() {
      try {
        this.loading = true
        this.$store.dispatch("user/login", this.loginForm).then(res => {
          //不是学校账号 退出
          if(res.data.type!=='2'){
            this.$dialog.alert({
              title: '友情提示',
              message: '此账号为管理员账号，请重新更换学校账号登录。',
              theme: 'round-button',
            }).then(() => {
              this.$store.dispatch("user/logout");
            });
            return false
          }
          this.$toast({
            message: res.message,
            position: "middle",
            icon: 'success',
            duration: 1500,
            onClose: () => {
              this.$router.push("/select_class");
            },
          })
        }).finally( error=>{
          this.loading = false;
          this.getCaptchaImg()
        })
      } catch (error) {
        await this.$store.dispatch("user/logout");
        this.loading = false;
      }
    },
    getCaptchaImg() {
      this.captchaPath = configEnv.baseApi + '/index/admin/getImgCode/' + new Date()
    },
  },
};
</script>

<style lang="scss" scoped>
    .form_panel {
        padding: 40px 30px;
        height: 793px;
        .form_title {
            text-align: center;
            font-size: 34px;
            font-weight: bold;
            margin-bottom: 100px;
            color: #292929;
        }
        .submit_btn {
            display: block;
            width: 530px;
            height: 81px;
            background: linear-gradient(180deg, #FF9C70 0%, #FF804E 100%);
            border-radius: 10px;
            margin: 110px auto 0;
            font-size: 28px;
        }
        .input_item {
            font-size: 28px;
            padding-left: 20px;
        }
        .van-field {
            &:after {
                left: 0;
            }
            ::v-deep .van-field__left-icon {
                margin-right: 25px;
                .iconfont {
                    font-size: 30px;
                }
            }
        }
        .btn_link {
            display: block;
            text-align: center;
            font-size: 24px;
            font-weight: 500;
            color: #9B9B9B;
            margin-top: 40px;
        }
        .captcha {
            width: 192px;
            height: 60px;
            display: block;
            background-color: #ccc;
        }
    }
</style>
